ポストプロセッシング

フィルターシェーダーは、p5.strands の他のシェーダーとほぼ同じように構築されます。唯一の違いは、フィルターではフラグメントシェーダー（画面上の色を決定するもの）のみを扱う点です。フィルターは、毎フレームのスケッチの「スナップショット」を撮り、それをフラグメントシェーダーに渡して色を操作することで機能します。このように、ポストプロセッシング（後処理）を通じてのみ可能なエフェクトも存在します。

baseFilterShader() では、getColor(inputs, canvasContent) という 1 つのフックのみが利用可能です。inputs には texCoord（テクスチャ座標）、canvasSize、texelSize が含まれています。もう 1 つのパラメータ canvasContent は、スケッチのスナップショットです。

テクスチャ座標の確認

ピクセル化などの複雑なエフェクトを作成する前に、テクスチャ座標 (Texture coordinates)、別名 UV 座標 がどのように動作するかを確認しましょう。

右のスケッチのソースコードを見てみましょう。getColor 関数内で inputs.texCoord をそのまま色の RGB 値として返しています（青成分は 0）：

let pixelateShader;

function pixelateCallback() {
  getColor((inputs, canvasContent) => {
    let coord = inputs.texCoord;
    return [coord, 0, 1];
  });
}

async function setup() {
  createCanvas(200, 200);
  pixelDensity(1);
  pixelateShader = baseFilterShader().modify(pixelateCallback);
}

function draw() {
  filter(pixelateShader);
}

画面の動きを確認してください：

• 左上隅は黒くなります（座標が (0, 0) のため）
• 左下隅は緑になります（座標が (0, 1) のため）
• 右上隅は赤になります（座標が (1, 0) のため）
• 右下隅は黄色になります（座標が (1, 1)。赤+緑のため）

これが、画面上の各ピクセルが自分がどこにいるかを認識するための「地図」となります。次のステップでは、この地図を操作してピクセル化エフェクトを作ります。